<template>
    <div class="article-main">
        <div class="article-header">
            <div class="article-title">{{article.title}}</div>
            <div class="article-label">
                <div class="article-label-inner-username">
                    <van-icon name="user-o"/>
                    {{article.username}}
                </div>
                <div class="article-label-inner-date">
                    <van-icon name="calendar-o"/>
                    {{article.createTime}}
                </div>
                <div class="article-label-inner-catalog">
                    <van-icon name="label-o"/>
                    {{article.catalogName}}
                </div>
            </div>
        </div>
        <van-divider/>
        <!--文章摘要部分开始-->
        <div style="background-color: #EEE; border:0px solid #ddd;border-radius: 10px;padding:20px 20px;display:block;color:#666;font-size: 10pt">
            {{article.summary}}
        </div>
        <!--文章摘要部分结束-->
        <!----文章内容部分开始------>
        <div class="markdown-body" v-html="article.content" style="font-size: x-small;">
        </div>
        <!--文章内容部分结束-->
    </div>
</template>

<script>
    import request from "@/util/request";

    export default {
        name: "MymArticleContent",
        data(){
            return{
                currentArticleId: this.$route.query.aid,
                article:{}
            }
        },
        mounted() {
            console.log('当前文章编号是：'+this.currentArticleId);
            this.refreshArticleContent(this.currentArticleId);
        },
        methods:{
            refreshArticleContent(aid){
                //console.log('执行了refreshArticleContent=>'+aid);
                request.get('/blog/article/'+aid).then(resp => {
                    if (resp.data.code === 200) {
                        this.article = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    @import "https://cdn.bootcdn.net/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css";
    .article-main{
        padding: 10px 10px 60px 10px;
    }
    .article-header {
        text-align: center;
        font-size: medium;
        font-weight: bold;
        color: #336699;
        padding: 5px 0px 0px 0px;
    }

    .article-title{
        margin-bottom: 10px;
    }

    .article-label {
        display: flex;
        padding: 0px;
        font-size: 12px;
        font-family: 楷体;
        color: #cccccc;
        align-content: space-around;
    }

    .article-label-inner-username {
        width: 30%;
    }
    .article-label-inner-date {
        width: 40%;
    }
    .article-label-inner-catalog{
        width: 30%;
    }

    .markdown-body {
        margin: 2px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 20px 10px 20px 10px;
        font-size: small;
        background-color: #F6F8FA;
    }

    .markdown-body /deep/ pre{
        background-color: #FFF;
    }

    .markdown-body /deep/ ul li{
        list-style: disc;
    }

    .markdown-body /deep/ ol li{
        list-style: decimal;
    }

</style>